<template>
  <div class="g-bd">
    <!-- 主体 -->
    <div class="main f-fl" v-if="artistDetail">
      <!-- 头部包裹 -->
      <div class="artistwrap">
        <!-- 艺人名称 -->
        <div class="title">
          <h2 class="name f-fl f-thide">{{ artistDetail.artist.name }}</h2>
          <h3 class="nickname f-fl f-thide">
            <span v-for="al in artistDetail.artist.alias" :key="al">{{ al }}</span>
          </h3>
        </div>
        <!-- 艺人头像 -->
        <img :src="artistDetail.artist.picUrl + '?param=640y300'" alt="" />
        <!-- 遮罩层 -->
        <div class="mask f-alpha"></div>
        <!-- 个人主页 -->
        <router-link
          v-if="artistDetail.artist.accountId"
          :to="'/user/home?id=' + artistDetail.artist.accountId"
          class="btnuser u-iconall"
          >Ta的个人主页</router-link
        >
        <!-- 收藏 -->
        <a
          href="javascript:void(0);"
          class="btnfav u-iconall"
          @click="$Message({ msg: '功能未开发' })"
          >收藏</a
        >
      </div>
      <!-- tabbar -->
      <ul class="tabbar tab">
        <li>
          <router-link
            :to="`/artist?id=${$route.query.id}`"
            class="tab"
            :class="$route.path === '/artist' ? 'z-slt' : ''"
            >热门作品</router-link
          >
        </li>
        <li>
          <router-link
            :to="`/artist/album?id=${$route.query.id}`"
            class="tab"
            :class="$route.path === '/artist/album' ? 'z-slt' : ''"
            >所有专辑</router-link
          >
        </li>
        <li>
          <router-link
            :to="`/artist/mv?id=${$route.query.id}`"
            class="tab"
            :class="$route.path === '/artist/mv' ? 'z-slt' : ''"
            >相关MV</router-link
          >
        </li>
        <li>
          <router-link
            :to="`/artist/desc?id=${$route.query.id}`"
            class="tab"
            :class="$route.path === '/artist/desc' ? 'z-slt' : ''"
            >艺人介绍</router-link
          >
        </li>
      </ul>
      <!-- top50 -->
      <div class="top50" v-if="$route.path === '/artist'">
        <!-- 操作按钮 -->
        <div class="tmhi-btn">
          <a
            href="javascript:void(0);"
            class="play u-btn2"
            title="播放"
            @click="playList(artistDetail.hotSongs)"
            ><i><em class="icon-play u-btn2"></em>播放</i></a
          >
          <a
            href="javascript:void(0);"
            class="add u-btn2"
            title="添加到播放列表"
            @click="addToPlayList(artistDetail.hotSongs)"
          ></a>
          <a
            href="javascript:void(0);"
            class="subscribed-count u-btn2"
            @click="$Message({ msg: '功能未开发' })"
            ><i>收藏热门50</i></a
          >
          <div class="sltbtn f-fr u-btn2">
            <i><em class="txt">热门单曲</em><em class="u-icn u-icn3 icon3"></em></i>
            <ul>
              <li class="selected">热门单曲</li>
              <li @click="$Message({ msg: '功能未开发' })">作词作品</li>
              <li @click="$Message({ msg: '功能未开发' })">作曲作品</li>
            </ul>
          </div>
        </div>
        <!-- 榜单列表 -->
        <div class="tm-list">
          <!-- 歌曲列表 -->
          <div class="tml-song-list">
            <div class="tmls-wrap">
              <table>
                <!-- 表格主体 -->
                <tbody>
                  <tr
                    v-for="(item, index) in artistDetail.hotSongs"
                    :key="item.name + item.id"
                    :class="index % 2 === 0 ? 'even' : ''"
                  >
                    <!-- 排名 -->
                    <td class="tb-hd">
                      <div class="hd">
                        <span class="num">{{ index + 1 }}</span>
                        <div class="ply">
                          <span
                            class="icon"
                            @click="playSong(item)"
                            ref="coverRefs"
                            :class="item.id === currentSongId ? 'z-sel' : ''"
                          ></span>
                        </div>
                      </div>
                    </td>
                    <!-- 歌名 -->
                    <td class="title-tb">
                      <div class="f-fl">
                        <div class="dec">
                          <span class="decwrap">
                            <span class="txt"
                              ><router-link :to="`/song?id=${item.id}`">{{
                                item.name
                              }}</router-link></span
                            >
                            <span class="alia" v-if="item.alia[0]"> - ({{ item.alia[0] }})</span>
                            <router-link
                              :to="`/mv?id=${item.mv}`"
                              class="mv"
                              v-if="item.mv"
                            ></router-link>
                          </span>
                        </div>
                      </div>
                    </td>
                    <!-- 时长 -->
                    <td class="duration-tb">
                      <span class="dura">{{ item.dt | songDuration }}</span>
                      <div class="opt">
                        <a href="javascript:;" class="u-icn add" title="添加到播放列表"></a>
                        <span
                          class="u-table icn-fav"
                          title="收藏"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                        <span
                          class="u-table icn-share"
                          title="分享"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                        <span
                          class="u-table icn-dl"
                          title="下载"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                      </div>
                    </td>
                    <!-- 专辑 -->
                    <td class="album-tb">
                      <div class="album" :title="item.al.name">
                        <router-link :to="`/album?id=${item.al.id}`">{{
                          item.al.name
                        }}</router-link>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <router-view v-if="$route.path !== '/artist'"></router-view>
    </div>
    <div class="aside f-fr">
      <h3 class="u-hd3">热门歌手</h3>
      <ul class="hotlist clearfix">
        <li v-for="sub in hotSinger" :key="sub.id">
          <router-link :to="`/artist?id=${sub.id}`" :title="sub.name" class="hd-wrap">
            <img :src="sub.picUrl + '?param=50y50'" alt="" />
          </router-link>
          <p class="f-thide">
            <router-link :to="`/artist?id=${sub.id}`" :title="sub.name">{{ sub.name }}</router-link>
          </p>
        </li>
      </ul>
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import { songDuration } from '@/utils/filters.js'
import { currentSongId } from '@/utils/methods.js'
export default {
  data() {
    return {
      // top50歌曲
      artistDetail: null,
      // 热门歌手
      hotSinger: null
    }
  },
  methods: {
    // 获取艺术家详情
    async getArtistDetail() {
      const { data } = await this.$http.get(`/artists?id=${this.$route.query.id}`)
      // console.log(data)
      this.artistDetail = data
    },
    // 获取热门歌手
    async getHotSinger() {
      const { data } = await this.$http.get('/top/artists?offset=0&limit=6')
      // console.log(data)
      this.hotSinger = data.artists
    },
    // 将播放列表替换为榜单列表
    playList(tracks) {
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    },
    // 添加到播放列表
    addToPlayList(tracks) {
      if (!(tracks instanceof Array)) {
        if (tracks.fee !== 0 && tracks.fee !== 8) {
          this.$Message({ msg: '无版权/VIP歌曲' })
        }
      }
      this.$store.commit('Music/pushSongList', tracks)
    },
    playSong(tracks) {
      console.log(tracks)
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  computed: { currentSongId },
  filters: { songDuration },
  created() {
    this.getArtistDetail()
    this.getHotSinger()
  },
  watch: {
    $route() {
      this.getArtistDetail()
    }
  }
}
</script>

<style lang="less" scoped>
@import url(./ArtistDetail.less);
</style>
